<script setup>
import { NCarousel } from 'naive-ui'

const tabList = ref([
  { title: '前瞻性洞察', desc: '掌握最新的市场动态和未来趋势，帮助您在竞争中脱颖而出', icon: '/images/banner/solution/dongcha.png' },
  { title: '权威数据分析', desc: '详实的数据分析，提供行业现状和发展方向的全面解读', icon: '/images/banner/solution/shuju.png' },
  { title: '实战案例分享', desc: '包含多个成功案例，提供可借鉴的实战经验和操作策略', icon: '/images/banner/solution/anli.png' },
  { title: '专业建议指导', desc: '行业内专家团队撰写，提供专业的运营建议和指导', icon: '/images/banner/solution/jianyi.png' }
])
</script>

<template>
  <NCarousel dot-type="line" dot-placement="bottom" direction="horizontal" :show-dots="true" trigger="click" style="width: 100%; height: 800px">
    <div class="banner1">
      <div class="flex flex-col justify-center items-center mt-40px">
        <div class="flex flex-col items-center">
          <div class="500 text-44px leading-62px mt-20px mb-20px">《2024中国住房租赁行业运营白皮书》</div>
          <div class="500 text-32px leading-45px">深入了解行业动态，掌握未来趋势</div>
          <div class="400 text-24px leading-33px mt-30px" style="color: #777777">出品方：寓学社 ｜ 寓盟管家</div>
        </div>
      </div>
      <div class="top-box">
        <div v-for="(item, i) in tabList" :key="i" class="w-582px h-164px item">
          <img :src="item.icon" alt="" class="w-80px h-80px" />
          <div class="ml-40px mr-40px">
            <div class="tit text-28px 500 leading-40px">{{ item.title }}</div>
            <div class="tit text-20px 400 leading-28px mt-10px" style="color: #333">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <img
      class="h-full w-full"
      src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
    > -->
    <template #dots="{ total, currentIndex, to }">
      <ul class="flex justify-center absolute bottom-20px left-0 w-full">
        <li v-for="index of total" :key="index" class="w-80px h-4px mx-15px cursor-pointer" :class="[currentIndex == index - 1 ? 'bg-hex-0A87F8' : 'bg-hex-D1D1D1']" @click="to(index - 1)" />
      </ul>
    </template>
  </NCarousel>
</template>

<style scoped>
.banner1 {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  overflow: hidden;
  /* width: 100%; */
  height: 100%;
  background: url('/public/images/banner/solution/banner3.png') no-repeat 0 0;
  background-size: 100% 100%;
}

@keyframes platform-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes item-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.platform {
  opacity: 0;
  @apply w-full h-full;
  /* animation: platform-animation duration timing-function delay iteration-count direction fill-mode; */
  animation: platform-animation 0.5s ease-in 0s 1 normal forwards;
}

.heyue {
  opacity: 0;
  @apply w-389px h-315px absolute left-90px top-20px z-4;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}

.fangyuan {
  opacity: 0;
  @apply w-377px h-285px absolute -left-140px -top-86px z-3;
  animation: item-animation 0.5s ease-in 1.5s 1 normal forwards;
}

.hezhengzu {
  opacity: 0;
  @apply w-633px h-421px absolute -left-300px top-72px z-3;
  animation: item-animation 0.5s ease-out 2.5s 1 normal forwards;
}

.caiwu {
  opacity: 0;
  @apply w-377px h-286px absolute -right-180px -bottom-84px z-3;
  animation: item-animation 0.5s ease-out 3s 1 normal forwards;
}

.chufang {
  opacity: 0;
  @apply w-438px h-364px absolute -right-230px -top-74px z-1;
  animation: item-animation 0.5s ease-out 3.5s 1 normal forwards;
}
.left-icon {
  opacity: 0;
  @apply w-236px h-237px absolute -left-300px top-72px z-3;
  animation: item-animation 0.5s ease-out 2s 1 normal forwards;
}
.right-icon {
  opacity: 0;
  @apply w-236px h-237px absolute -right-260px -top-90px z-1;
  animation: item-animation 0.5s ease-out 4s 1 normal forwards;
}

.top-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1200px;
  margin: 30px auto 0;
}
.item {
  margin-top: 30px;
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
</style>
